<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态爱心</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        canvas {
            position: absolute;
        }
        .message {
            position: relative;
            z-index: 10;
            color: white;
            font-family: 'Microsoft YaHei', sans-serif;
            text-align: center;
            text-shadow: 0 0 10px #ff0080;
        }
        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }
        p {
            font-size: 1.2em;
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="message">
        <h1>❤ 送给小秦宝宝 ❤</h1>
        <p>二周年快乐</p>
    </div>
    <canvas id="loveCanvas"></canvas>

    <script>
        const canvas = document.getElementById('loveCanvas');
        const ctx = canvas.getContext('2d');
        
        // 设置画布大小为窗口大小
        function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        
        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();
        
        // 爱心粒子数组
        const particles = [];
        const particleCount = 200;
        
        // 爱心参数
        const heartScale = 10;
        const beatSpeed = 0.05;
        
        // 粒子类
        class Particle {
            constructor() {
                this.reset();
                this.size = Math.random() * 5 + 2;
                this.color = `hsl(${Math.random() * 360}, 100%, 70%)`;
            }
            
            reset() {
                this.angle = Math.random() * Math.PI * 2;
                this.distance = Math.random() * 20 + 50;
                this.speed = Math.random() * 0.5 + 0.1;
                this.offset = Math.random() * Math.PI * 2;
            }
            
            update(time) {
                this.angle += this.speed * 0.01;
                this.distance += Math.sin(time * 0.001 + this.offset) * 0.3;
                
                // 重置粒子位置
                if (this.distance > 100 || this.distance < 40) {
                    this.reset();
                }
            }
            
            draw(time, centerX, centerY, scale) {
                const x = centerX + Math.sin(this.angle) * this.distance * scale;
                const y = centerY + Math.cos(this.angle) * this.distance * scale * 0.8;
                
                ctx.beginPath();
                ctx.arc(x, y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
            }
        }
        
        // 创建粒子
        for (let i = 0; i < particleCount; i++) {
            particles.push(new Particle());
        }
        
        // 绘制爱心函数
        function drawHeart(time, centerX, centerY, scale) {
            ctx.beginPath();
            
            for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
                const x = centerX + 16 * Math.pow(Math.sin(angle), 3) * scale;
                const y = centerY - (13 * Math.cos(angle) - 
                                5 * Math.cos(2 * angle) - 
                                2 * Math.cos(3 * angle) - 
                                Math.cos(4 * angle)) * scale;
                
                if (angle === 0) {
                    ctx.moveTo(x, y);
                } else {
                    ctx.lineTo(x, y);
                }
            }
            
            ctx.closePath();
            const gradient = ctx.createRadialGradient(
                centerX, centerY, 0,
                centerX, centerY, 150 * scale
            );
            gradient.addColorStop(0, '#ff0080');
            gradient.addColorStop(1, '#800040');
            
            ctx.fillStyle = gradient;
            ctx.fill();
            
            // 绘制粒子
            particles.forEach(particle => {
                particle.update(time);
                particle.draw(time, centerX, centerY, scale);
            });
        }
        
        // 动画循环
        let startTime = null;
        
        function animate(timestamp) {
            if (!startTime) startTime = timestamp;
            const elapsedTime = timestamp - startTime;
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 计算心跳效果
            const beat = Math.sin(elapsedTime * beatSpeed) * 0.1 + 1;
            const scale = heartScale * beat;
            
            // 绘制爱心
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            drawHeart(elapsedTime, centerX, centerY, scale);
            
            requestAnimationFrame(animate);
        }
        
        // 启动动画
        animate(0);
    </script>
</body>
</html>